<template>
  <div class="icon-body">
    <el-input
      v-model="name"
      style="position: relative"
      clearable
      placeholder="请输入图标名称"
      @clear="filterIcons"
      @input.native="filterIcons"
    >
      <i slot="suffix" class="el-icon-search el-input_icon"></i>
    </el-input>
    <div class="icon-list">
      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
        <svg-icon :icon-class="item" style="height: 30px; width: 16px" />
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import icons from "./requireIcons";
export default {
  name: "IconSelect",
  data() {
    return {
      name: "",
      iconList: icons,
    };
  },
  methods: {
    filterIcons() {
      this.iconList = icons;
      console.log(this.iconList);
      if (this.name) {
        this.iconList = this.iconList.filter((item) => item.includes(this.name));
      }
    },
    selectedIcon(name) {
      console.log(name);
      this.$emit("selected", name);
      document.body.click();
    },
    reset() {
      this.name = "";
      this.iconList = icons;
    },
  },
};
</script>
<style lang="stylus" scoped>
.icon-body
    width 100%
    padding 10px
    .icon-list
        height 200px
        overflow-y scroll
        div
            height 30px
            line-height 30px
            margin-bottom -5px
            cursor pointer
            width 33%
            float left
        span
            display inline-block
            vertical-align -0.15em
            fill currentColor
            overflow hidden
</style>
